<template>
    <div class="cart">
        <Header title="购物车" :edit="true"/>
        <CartDetail v-if="isShow" :changeShow="changeShow"/>
        <Empty v-else/>
        <Footer />
    </div>
</template>

<script>
import Footer from '../../components/Footer.vue'
import Empty from '../../components/Empty.vue'
import Header from '../../components/Header.vue'
import CartDetail from './components/CartDetail.vue'
import { useStore } from 'vuex'
import { onMounted, ref } from 'vue'
export default {
    components: {
        Footer,
        Empty,
        Header,
        CartDetail
    },
    setup() {
        const isShow = ref(true)
        const store = useStore()

        const init = () => {
            if (store.state.cartList.length === 0) {
                isShow.value = false
            }
        }
        const changeShow = () =>{
            isShow.value = false
        }
        onMounted(() => {
            init()
        })
        return {
            isShow,
            changeShow
        }
    }

}
</script>
<style lang="less" scoped>
.cart {
    display: flex;
    flex-flow: column;
    height: 100%;

    .content {
        flex: 1;
        overflow-y: auto;
    }
}
</style>
